<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考生基本信息</title>
  <link rel="stylesheet" href="../assets/vant.css" />
  <script src="../assets/vue-2.6.14.min.js"></script>
  <script src="../assets/vant.min.js"></script>
  <script src="../assets/area.js"></script>
  <style>
    #app-user {
      background: #F0F1F0;
      min-height: calc(100vh - 46px);
    }

    .van-nav-bar .van-icon {
      color: #333;
    }

    .tip-info, .upload-info {
      color: #fa4955;
      padding: 12px;
      font-size: 14px;
    }

    .basic-info {
      margin-bottom: 20px;
      margin-top: 46px;
    }
    .exam-info {
      margin-top: 46px;
    }
    .address-label {
      background: #fef7da;
      color: #ff9200;
      font-size: 12px;
      padding: 6px 12px;
    }

    .next-button {
      padding: 20px;
    }

    .last-tip {
      color: #9B9C9C;
      margin: 12px 8px;
      line-height: 28px;
    }

    .upload-box {
      margin-top: 12px;
      color: #D6D7D7;
      font-weight: 400;
      display: flex;
      align-items: center;
    }
  </style>
</head>

<body>
  <div id="app-user">
    <van-nav-bar fixed title="考生基本信息" left-arrow @click-left="goBack"></van-nav-bar>
    <template v-if="currentStep === 1">
      <van-cell-group class="basic-info">
        <div class="upload-info">
          请上传照片 2寸证件照 <br />
          本照片用作本人确认及证书的制作，请使用规范证件照 <br>
          <div class="upload-box">
            <van-uploader v-model="avatarList" multiple :max-count="1"></van-uploader>
            （点击上传，仅支持上传1张）
          </div>
        </div>
        
        <van-field v-model="user.name" label="真实姓名" placeholder="请输入考生姓名" input-align="right"></van-field>
        <van-field v-model="user.name_pinyin" label="姓名拼音" placeholder="请输入姓名拼音" input-align="right"></van-field>
        <van-field readonly @click="toggleGenderPicker(true)" v-model="user.gender" is-link label="考生性别"
          placeholder="请选择" input-align="right">
        </van-field>
        <van-field readonly @click="toggleNationalityPicker(true)" v-model="user.nation" is-link label="民族"
          placeholder="请选择" input-align="right">
        </van-field>
        <van-field readonly input-align="right" is-link v-model="user.birthday" label="出生日期" placeholder="请选择"
          @click="toggleCalendar(true)">
        </van-field>
        <van-field readonly @click="toggleCertTypePicker(true)" v-model="user.certType" is-link label="证件类型"
          placeholder="请选择" input-align="right">
        </van-field>
        <div class="tip-info">
          温馨提示：请仔细确认以上考生信息为您本人
        </div>
      </van-cell-group>


      <div class="address-label">邮寄地址</div>
      <van-cell-group class="address-info">
        <van-field v-model="user.contact" label="联系人" placeholder="请输入" input-align="right"></van-field>
        <van-field v-model="user.phone" label="手机号码" placeholder="请输入" input-align="right"></van-field>
        <van-field v-model="user.address" @click="toggleAreaPicker(true)" readonly is-link label="所在地址"
          placeholder="省/市/区" input-align="right"></van-field>
        <van-field v-model="user.detailAddress" autosize rows="2" label="详细地址" type="textarea" placeholder="请输入详细地址"
          input-align="right"></van-field>
      </van-cell-group>

      <div class="next-button">
        <van-button round block color="#fa4955" @click="goNext">下一步</van-button>
      </div>

    </template>
    <template v-if="currentStep === 2">
      <van-cell-group class="exam-info">
        <van-field label="报考科目" placeholder="请输入考生姓名" input-align="right"></van-field>
        <van-field label="培训机构" placeholder="请填写" input-align="right"></van-field>
        <van-field label="推荐机构" placeholder="此项为选填" input-align="right"></van-field>
        <van-field readonly is-link label="报考级别" placeholder="请选择" input-align="right"></van-field>
        <van-field readonly is-link label="考试曲目" placeholder="请选择" input-align="right"></van-field>
        <van-field readonly is-link label="考试费用" placeholder="请选择" input-align="right"></van-field>
        <div class="tip-info">
          说明：考生选择不同的级别，考试费用是不一样的。
        </div>
      </van-cell-group>

      <div class="last-tip">
        自动生成准考证号，提交三个工作日审核通过后，生成电子版准考证，考生自行下载打印。
      </div>

      <div class="next-button">
        <van-button round block color="#fa4955" @click="submit">提交</van-button>
      </div>

    </template>

    <!-- 由于弹框较多，为了避免逻辑混杂，这里将每个弹框独立出来，避免处理函数中过多的 if ... else ... 判读 -->

    <!-- 性别选择框 -->
    <van-popup v-model="showGenderPicker" position="bottom">
      <van-picker show-toolbar :columns="genderOptions" @confirm="onGenderConfirm" @cancel="toggleGenderPicker(false)">
      </van-picker>
    </van-popup>
    <!-- 民族选择框 -->
    <van-popup v-model="showNationalityPicker" position="bottom">
      <van-picker show-toolbar :columns="nationOptions" @confirm="onNationalityConfirm"
        @cancel="toggleNationalityPicker(false)">
      </van-picker>
    </van-popup>
    <!-- 日期选择框 -->
    <van-calendar v-model="showCalendar" @confirm="onBirthdayConfirm"></van-calendar>
    <!-- 证件类型选择框 -->
    <van-popup v-model="showCertTypePicker" position="bottom">
      <van-picker show-toolbar :columns="certTypeOptions" @confirm="onCertTypeConfirm"
        @cancel="toggleCertTypePicker(false)">
      </van-picker>
    </van-popup>
    <!-- 地址选择框 -->
    <van-popup v-model="showAreaPicker" position="bottom">
      <van-area title="省市区选择" :area-list="areaOptions" @confirm="onAreaConfirm" @cancel="toggleAreaPicker(false)">
      </van-area>
    </van-popup>
  </div>
</body>
<script>
  const genderOptions = [
    { text: '男', value: 'male' },
    { text: '女', value: 'female' },
  ];
  const nationOptions = [
    { text: '汉族', value: 'han' },
    { text: '苗族', value: 'miao' },
  ];
  const certTypeOptions = [
    { text: '身份证', value: 0 },
    { text: '护照', value: 1 },
  ]
  new Vue({
    el: '#app-user',
    data() {
      return {
        genderOptions,
        nationOptions,
        certTypeOptions,
        areaOptions: $areaList || [],
        showGenderPicker: false,
        showNationalityPicker: false,
        showCalendar: false,
        showCertTypePicker: false,
        showAreaPicker: false,
        user: {

        },
        currentStep: 1,
        avatarList: []
      }
    },
    methods: {
      // 性别选择
      onGenderConfirm(val) {
        console.info(val)
        this.toggleGenderPicker(false)
      },
      toggleGenderPicker(val) {
        this.showGenderPicker = val;
      },
      // 民族选择
      onNationalityConfirm(val) {
        console.info(val);
        this.toggleNationalityPicker(false)
      },
      toggleNationalityPicker(val) {
        this.showNationalityPicker = val;
      },
      // 生日选择
      toggleCalendar(val) {
        this.showCalendar = val;
      },
      onBirthdayConfirm(val) {
        console.info(val);
        this.toggleCalendar(false);
      },
      // 证件类型选择
      toggleCertTypePicker(val) {
        this.showCertTypePicker = val;
      },
      onCertTypeConfirm(certType) {
        console.info(certType);
        this.toggleCertTypePicker(false);
      },
      // 地址选择
      toggleAreaPicker(val) {
        this.showAreaPicker = val;
      },
      onAreaConfirm(val) {
        console.info(val);
        this.toggleAreaPicker(false);
      },
      goNext() {
        this.currentStep = 2
      },
      goBack() {
        window.history.back()
      },
      submit() {

      }
    },
  });
</script>

</html>